<template>
    <div class="form-warp">
    <form class="register">
      <p class="login-register">
        已经有账号了吗？
        <router-link class="router-link" :to="{name:'Login'}">登录</router-link>
      </p>
      <h2>创建账号</h2>
      <div class="inputs">
        <div class="input">
          <input type="text" placeholder="用户名" v-model="username">
          <User class="icon"/>
        </div>
        <div class="input">
          <input type="text" placeholder="邮箱" v-model="email">
          <Email class="icon"/>
        </div>
        <div class="input">
          <input type="password" placeholder="密码" v-model="password">
          <Password class="icon"/>
        </div>
        <div v-show="error" class="error">
          {{ this.errorMsg }}
        </div>
      </div>
      <button @click.prevent="register">登录</button>
      <div class="angle"></div>
    </form>
    <div class="background">
    </div>
  </div>
</template>

<script>
import Email from '../assets/Icons/envelope-regular.svg'
import Password from '../assets/Icons/lock-alt-solid.svg'
import User from '../assets/Icons/user-alt-light.svg'
import { register } from '@/api/user'
export default {
  name:'Register',
  components:{Email,Password,User},
  data(){
    return{ 
      email:"",
      username:"",
      password:"",
      error:"",
      errorMsg:""
    }
  },
  methods:{
    async register(){
      let userinfo = {
        user:{
          username: this.username,
          email:this.email,
          password:this.password
        }
      }
      try {
        const { data } = await register(userinfo)
        console.log('@',data)
        this.errorMsg = false
        this.error = false
        this.$store.commit('setUser',data.user)
        this.$router.push({ name: "Home" });
        return
      } catch (error) {
        this.error = true
        this.errorMsg = error.response.data.errors[0].msg
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.register{
  h2{
    min-width: 350px;
  }
}
</style>